<template>
  <div class="list">
    <div class="login">
      <div class="heard"><h2>用户登录</h2></div>

      <el-form
        ref="ruleFormRef"
        :model="state.loginFrom"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            placeholder="username"
            v-model="state.loginFrom.username"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="password"
            v-model="state.loginFrom.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
      <ul>
        <li style="color: #ffffff">
          <p>测试权限账号：</p>
          <p>提供三种权限账号：</p>
          <p>1. 超级管理员账号： super-admin</p>
          <p>2. 管理员账号：admin</p>
          <p>3. 测试可配置账号：test</p>
          <p>密码统一为：123456</p>
          <p>导入用户账号：</p>
          <p>可使用导入的用户名登录</p>
          <p>密码统一为：123456</p>
          <p style="font-weight: 400">注意：导入用户区分中英文库！！！！</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { getLogin } from "@/api/login.js";
import { useRouter } from "vue-router";
import md5 from "md5";
import { reactive, ref } from "vue";
import { useStore } from "vuex";
const router = useRouter();
let store = useStore();
const state = reactive({
  loginFrom: {
    password: "123456",
    username: "super-admin",
  },
});
//点击登录
const ruleFormRef = ref();

const submitForm = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      // console.log(1)
      const { password, username } = state.loginFrom;
      await getLogin({ username, password: md5(password) }).then((res) => {
        if (res.code == "200") {
          console.log(res);

          store.dispatch("stateSer", res.data.token);
          router.push({name:"home"});
        } else {
          return false;
        }
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 518px;
}
ul {
  list-style: none;
  li {
    p {
      margin-top: 10px;
      margin-left: 120px;
    }
    h2 {
      margin-top: 10px;
      margin-left: 120px;
    }
  }
}
.list {
  height: 100%;
  background-color: #2d3a4b;
  position: relative;
  max-height: 100%;

  .login {
    width: 460px;
    height: 400px;
    background-color: #2d3a4b;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    transform: translate(-50%, -50%);
    .el-button {
      width: 100%;
    }
    .el-form {
      margin-right: 120px;
      margin-top: 20px;
    }
    .heard {
      height: 50px;
      width: 100%;
      background-color: #2d3a4b;
      text-align: center;
      line-height: 50px;
      color: #eee;
    }
  }
}
</style>